<template>
  <div>
    <!-- 查询信息 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="searchData.Keywords" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="searchData.StartTime"
          type="date"
          placeholder="开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="-">
        <el-date-picker
          v-model="searchData.EndTime"
          type="date"
          placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="ShowAdminList">查询</el-button>
        <el-button type="success" @click="addAdmin">添加</el-button>
        <el-button type="danger" @click="batchDel">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 显示管理员信息 -->
    <el-table
      :data="AdminList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="AdminId" label="用户ID"> </el-table-column>
      <el-table-column
        prop="FullName"
        label="姓名"
        :formatter="formatterFullName"
      >
      </el-table-column>
      <el-table-column prop="Email" label="邮箱" :formatter="formatterEmail">
      </el-table-column>
      <el-table-column prop="UserName" label="用户名"> </el-table-column>
      <el-table-column prop="Avatar" label="头像">
        <template slot-scope="scope">
          <div class="block">
            <el-avatar
              :size="100"
              :src="'http://localhost:11708/' + scope.row.Avatar"
            ></el-avatar>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="CreateTime"
        label="注册时间"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column
        prop="末次登录时间"
        label="LastLoginTime"
        :formatter="formatterLastLoginTime"
      >
      </el-table-column>
      <el-table-column
        prop="末次登录IP"
        label="LastLoginIP"
        :formatter="formatterLastLoginIP"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="delAdmin(scope.row.AdminId)"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="editAdmin(scope.row.AdminId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div align="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加弹框 -->
    <el-dialog
      title="添加管理员"
      :visible.sync="dialogFormVisibleAdd"
      v-if="dialogFormVisibleAdd"
    >
      <add-admin ref="add" @onAddSuccess="Reload"></add-admin>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑管理员"
      :visible.sync="dialogFormVisibleEdit"
      v-if="dialogFormVisibleEdit"
    >
      <edit-admin
        ref="edit"
        :adminId="adminId"
        @onAddSuccess="Reload"
      ></edit-admin>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="SaveUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ShowAdmin, Delete, BatchDel } from "../../apis/admin";
import moment from "moment";
import AddAdmin from "./AddAdmin";
import EditAdmin from "./EditAdmin";
moment().format();
export default {
  //注册组件
  components: {
    AddAdmin,
    EditAdmin,
  },
  //数据
  data() {
    return {
      multipleSelection: [],
      adminId: 0,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      AdminList: [],
      total: 0,
      //分页
      page: {
        pageIndex: 1,
        pageSize: 3,
      },
      //查询信息
      searchData: {
        Keywords: "",
        StartTime: "",
        EndTime: "",
      },
    };
  },
  //方法
  methods: {
    //选中的信息
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除
    batchDel() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请至少选择一项！");
        return;
      }

      const _this = this;
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          BatchDel(this.multipleSelection.map((x) => x.AdminId)).then((res) => {
            if (res.Data) {
              this.$message({
                type: "success",
                message: "删除成功!",
                onClose: function () {
                  _this.Reload();
                },
              });
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除
    delAdmin(id) {
      const _this = this;
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Delete({ AdminId: id }).then((res) => {
            if (res.Data) {
              this.$message({
                type: "success",
                message: "删除成功!",
                onClose: function () {
                  _this.Reload();
                },
              });
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭添加弹窗并刷新页面
    Reload() {
      this.dialogFormVisibleAdd = false;
      this.dialogFormVisibleEdit = false;
      this.ShowAdminList();
    },
    //添加保存
    Save() {
      this.$refs.add.submitForm("ruleForm");
    },
    //修改保存
    SaveUpdate() {
      this.$refs.edit.submitForm("ruleForm");
    },
    //弹出添加对话框
    addAdmin() {
      this.dialogFormVisibleAdd = true;
    },
    //弹出修改对话框
    editAdmin(adminId) {
      this.adminId = adminId;
      this.dialogFormVisibleEdit = true;
    },
    //显示信息
    ShowAdminList() {
      ShowAdmin(Object.assign(this.page, this.searchData)).then((res) => {
        this.AdminList = res.Data.PageData;
        this.total = res.Data.Count;
      });
    },
    //#region 分页事件
    //改变页大小
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.ShowAdminList();
    },
    //改变页索引
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.ShowAdminList();
    },
    //#endregion

    //#region moment格式化
    //格式注册时间
    formatter(row) {
      return moment(row.CreateTime).format("YYYY年MM月DD日");
    },
    //格式姓名
    formatterFullName(row) {
      return row.FullName == null ? "-" : row.FullName;
    },
    //格式邮箱
    formatterEmail(row) {
      return row.Email == null ? "-" : row.Email;
    },
    //格式末次登录时间
    formatterLastLoginTime(row) {
      return row.LastLoginTime == null
        ? "-"
        : moment(row.LastLoginTime).format("YYYY年MM月DD日");
    },
    //格式末次登录IP
    formatterLastLoginIP(row) {
      return row.LastLoginIP == null ? "-" : row.LastLoginIP;
    },
    //#endregion
  },
  //勾子函数
  created() {
    this.ShowAdminList();
  },
};
</script>
<style>
</style>